<script setup lang="ts" name="Child">//setup语法糖
import { ref, reactive, toRefs, toRef, computed, watch, watchEffect, defineExpose, defineProps, withDefaults, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
import GrandSon from '../pages/GrandSon.vue'
let name = ref('zhangsan') //ref响应式(RefImpl对象): 基本类型(数字,字符串), 对象(层级不深)
let cars = ref({ brand: '奔驰', price: 100 }) //ref对象(层级不深)
let car = reactive({ brand: '奔驰', price: 100 }) //reactive相应式(Proxy代理函数): 只能对象数组(层级深)
let { brand, price } = toRefs(car) //toRefs: 将reactive中k-v全转为ref,解构赋值为响应式(ObjectRefImpl)
let brands = toRef(car, 'brand') //toRef: 将reactive中某个k-v转为ref
let computedResult = computed({ //计算属性(ref响应式)
  get() {
  },
  set(val) {
  }
})
const stopWatch = watch(name, (newValue, oldValue) => { //监视ref基本类型,不写.value

})
watchEffect(() => { //自动监视:不用指定监视谁,用到就监视,立即监视(一上来就监视)

})
function generalMethod() { //一般方法

}

import { useRoute } from 'vue-router' //路由query传参
let route = useRoute() //路由query传参
// defineProps(['id', 'title', 'content']) //路由规则的props

let toy = ref('奥特曼')
defineProps(['car', 'sendToy']) //props子接收父,子传父(函数)

let emit = defineEmits(['self-event']) //子传父(自定义事件)

import emitter from '@/utils/emitter' //emitter任意组件间传递
emitter.on('send-toy', (value: any) => { //emitter接收数据:绑定事件(订阅)
  toy.value = value
})
onUnmounted(() => { //卸载时解绑事件
  emitter.off('send-toy')
})

let book = ref(1)
defineExpose({ toy, book }) //宏函数(将子受保护数据交出去)

function minusHouse(parent: any) { //$parant子传父(获取父数据)
  parent.house -= 1
}
</script>

<template> <!--template不编译-->
  <div class="component-name"> <!--vue3无需根标签-->
    孩子组件
  </div>
  <div class="component-name">
    <h1>路由params接收参数:{{ route.params.id }}</h1>
    <!--<h1>路由规则的props接收参数:{{ id }}</h1>-->
  </div>

  <button @click="sendToy(toy)">子传父(函数)</button><br /> <!--子传父(函数)-->
  子接收父:{{ car }}

  <button @click="emit('self-event', toy)">子传父(自定义事件)</button><br /> <!--子传父(自定义事件)-->

  emitter任意组件间传递:{{ toy }}

  <GrandSon v-bind="$attrs" />
  <hr /> <!--$attrs爷传孙(儿过度)-->

  父操作子:{{ toy }} {{ book }}

  <button @click="minusHouse($parent)">$parant子传父(获取父数据)</button>
  <hr /> <!--$parant子传父(获取父数据)-->

  <slot>默认内容</slot> <!--默认插槽(组件标签内的标签,会被塞到插槽slot),多个slot会显示多个,name="default"-->
  <slot name="slotName">默认内容</slot> <!--具名插槽-->
  <slot name="slotNames">默认内容</slot> <!--具名插槽(简写)-->
  <slot :games="car">默认内容</slot> <!--作用域插槽:子传父,可取名,默认name="default"-->
</template>

<style lang="less" scoped>
//less嵌套写法,scoped域:样式只对当前组件有效
.component-name {}
</style>